<template>
    <div>
        <el-steps :active="1" simple>
            <el-step title="学生自评申请"></el-step>
            <el-step title="班级审核"></el-step>
            <el-step title="班内公示"></el-step>
            <el-step title="学院复审"></el-step>
            <el-step title="学校核定"></el-step>
        </el-steps>
        <div style="width: 60%;margin-top: 40px;">
            <el-descriptions title="学院：互联网金融与信息工程学院" :column=3 :colon=false>
                <el-descriptions-item label="专业：">kooriookami</el-descriptions-item>
                <el-descriptions-item label="审核开始时间：">18100000000</el-descriptions-item>
                <el-descriptions-item label="平均综测分：">59.9</el-descriptions-item>
                <el-descriptions-item label="班级：">3</el-descriptions-item>
                <el-descriptions-item label="审核结束时间：">2021.1.02</el-descriptions-item>
                <el-descriptions-item label=''></el-descriptions-item>
            </el-descriptions>
        </div>
        <!-- <el-descriptions  column = 1 labelstyle="{margin-left:auto}">
            <el-descriptions-item label="已审核人数">5</el-descriptions-item>
            <el-descriptions-item label="待审核人数" >2</el-descriptions-item>
        </el-descriptions> -->

        <!-- <div class="right">
            <div class="shenhe">已审核人数：5</div>
            <div class="shenhe">待审核人数：2</div>
            <div class="shenhe"
                style="background-color:blue;position: absolute;top: 30px;right: -200px ;color: aliceblue; font-size: 16px;">
                审核中
            </div>
        </div> -->

        <template>
            <div class="form1">
                <!-- <form action="">
                    <div style="float:left">
                        <span class="rank">排序</span>
                        <select class="select_first" name="">
                            <option value="stu_num">学号</option>
                            <option value="self_score">自评分</option>
                            <option value="class_score">班委评分</option>
                        </select>
                    </div>
                    <div style="float:right">
                        <span class="rank">筛选</span>
                        <select class="select_first" name="">
                            <option value="stu_num">审核中</option>
                            <option value="self_score">已审核</option>
                            <option value="class_score">未提交</option>
                            <option value="class_score">未审核</option>
                        </select>
                    </div>

                </form> -->

                <el-table :data="tableData" border v-loading=false style="width: 100%; margin-top: 20px;" :fit=false>
                    <el-table-column fixed prop="index" label="序号" width="50" type="index">
                    </el-table-column>
                    <el-table-column fixed prop="stu_num" label="学号" width="120"
                        :filters="[{text:'2013456',value:'2013456'},{text:'2013455',value:'2013455'},{text:'2013458',value:'2013458'},{text:'2013457',value:'2013457'}]"
                        :filter-method="filterHandler">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="content" label="内容" width="180">
                    </el-table-column>
                    <el-table-column prop="new_time" label="更新时间" width="120">
                    </el-table-column>
                    <el-table-column prop="self_score" label="自评分" width="100" sortable>
                    </el-table-column>
                    <el-table-column prop="class_score" label="班委评分" width="110" sortable>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="100"
                        :filters="[{text:'审核中',value:'审核中'},{text:'已审核',value:'已审核'},{text:'未审核',value:'未审核'},{text:'未提交',value:'未提交'}]"
                        :filter-method="filterHandler">
                    </el-table-column>
                    <el-table-column prop="person" label="审核人" width="100">
                    </el-table-column>
                    <el-table-column prop="date" label="审核时间" width="100">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="187">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                            <el-button type="text" size="small">审核</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <div class="block">
                    <el-pagination layout="prev, pager, next" :total="40" :page-size="num" @current-change="pageChange"
                        :current-page="curPage">
                    </el-pagination>
                </div>
            </div>
        </template>
    </div>

</template>

<script>
// import { text } from 'body-parser'

export default {
    name: 'Class',
    data() {
        return {
            tableData: [{
                stu_num: '2013456',
                name: '王小虎',
                content: '2022-2023综合测评',
                new_time: '2021.11.22',
                self_score: 100,
                class_score: 100,
                status: '审核中',
                person: '吴志扬',
                date: '2022.02.01'
            },
            {
                stu_num: '2013455',
                name: '王小虎',
                content: '2022-2023综合测评',
                new_time: '2021.11.22',
                self_score: 100,
                class_score: 99,
                status: '已审核',
                person: '吴志扬',
                date: '2022.02.01'
            },
            {
                stu_num: '2013458',
                name: '王小虎',
                content: '2022-2023综合测评',
                new_time: '2021.11.22',
                self_score: 100,
                class_score: 98,
                status: '未审核',
                person: '吴志扬',
                date: '2022.02.01'
            },
            {
                stu_num: '2013457',
                name: '王小虎',
                content: '2022-2023综合测评',
                new_time: '2021.11.22',
                self_score: 100,
                class_score: 97,
                status: '审核中',
                person: '吴志扬',
                date: '2022.02.01'
            }],
            num: 6,
            curPage: 1
        }
    },
    methods: {
        handleClick(row) {
            console.log(row)
        },
        pageChange(n) {
            this.curPage = n
        },
        filterHandler(value, row, column) {
            const property = column['property'];
            return row[property] === value;
        }
    }
}

</script>
<style scoped>
/* .demo .el-descriptions .el-descriptions__body .el-descriptions__table .el-descriptions-row td{
            width: 30% !important;
        } */
.left {
    float: left;
    /* margin-top: 40px; */
}

.right {
    position: absolute;
    top: 50px;
    right: 400px;
    font-family: “Microsoft YaHei”;
}

.shenhe {
    width: 180px;
    height: 50px;
    font-size: 14px;
    /* background-color: rgb(243, 234, 234); */
    text-align: center;
    line-height: 50px;
    margin-bottom: 4px;
    border: 2px solid #ccc;
    /* box-shadow: 5px 5px 5px #ccc; */
}

.form1 {
    /* position: absolute;
    top: 170px; */
    /* bottom: 100px; */
    margin-top: 3%;
    width: 100%;
}

.select_first {
    width: 150px;
    height: 30px;
    border: 1px solid #ccc;
    outline: medium
}

.rank {
    display: inline-block;
    padding: 4px;
    font-size: 14px;
    margin-right: 3px;
    border-radius: 1px;
    background-color: skyblue;
}
</style>
